<% if (pageData.hero) { %>
    <section class="relative overflow-hidden bg-gray-900 py-32 rounded-xl">
        <div class="absolute inset-0 opacity-30">
            <div class="absolute inset-0 bg-[url('data:image/svg+xml,...')] opacity-10 bg-repeat"></div>
            <div class="absolute inset-0 bg-gradient-to-br from-violet-600/20 to-indigo-900/40"></div>
        </div>

        <div class="relative mx-auto max-w-7xl px-6 lg:px-8">
            <div class="mx-auto max-w-2xl text-center">
                <h1 class="text-4xl font-bold tracking-tight text-white sm:text-6xl bg-clip-text text-transparent bg-gradient-to-r from-indigo-200 to-indigo-400">
                    <%= pageData.hero.title %>
                </h1>
                <p class="mt-6 text-lg leading-8 text-gray-300">
                    <%= pageData.hero.description %>
                </p>
                <div class="mt-10 flex items-center justify-center gap-x-6">
                    <a href="<%= pageData.hero.primaryCta.url %>"
                       class="rounded-xl bg-indigo-600 px-8 py-3.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 transition-all duration-300">
                        <%= pageData.hero.primaryCta.text %>
                    </a>
                    <a href="<%= pageData.hero.secondaryCta.url %>"
                       class="text-sm font-semibold leading-6 text-white hover:text-indigo-300 transition-all duration-300">
                        <%= pageData.hero.secondaryCta.text %> <span aria-hidden="true">→</span>
                    </a>
                </div>
            </div>
        </div>
    </section>
<% } %>

<% if (pageData.features) { %>
    <section class="py-24 bg-white sm:py-32">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <div class="mx-auto max-w-2xl text-center">
                <h2 class="text-base font-semibold leading-7 text-indigo-600">
                    <%= pageData.features.subtitle %>
                </h2>
                <p class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
                    <%= pageData.features.title %>
                </p>
                <p class="mt-6 text-lg leading-8 text-gray-600">
                    <%= pageData.features.description %>
                </p>
            </div>

            <div class="mx-auto mt-16 max-w-7xl sm:mt-20 lg:mt-24">
                <div class="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-3">
                    <% pageData.features.items.forEach(function(feature) { %>
                        <div class="relative bg-white p-8 rounded-2xl shadow-sm ring-1 ring-gray-200/50 hover:shadow-lg transition-all duration-300">
                            <div class="mb-6">
                                <div class="rounded-lg bg-indigo-600/10 p-3 w-12 h-12 flex items-center justify-center">
                                    <%- feature.icon %>
                                </div>
                            </div>
                            <h3 class="text-lg font-semibold leading-8 text-gray-900 mb-3">
                                <%= feature.title %>
                            </h3>
                            <p class="text-base leading-7 text-gray-600">
                                <%- feature.description %>
                            </p>
                        </div>
                    <% }); %>
                </div>
            </div>
        </div>
    </section>
<% } %>

<% if (pageData.stats) { %>
    <section class="relative isolate overflow-hidden bg-gray-900 py-24 sm:py-32 rounded-xl">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <div class="mx-auto max-w-2xl lg:max-w-none">
                <div class="text-center">
                    <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
                        <%= pageData.stats.title %>
                    </h2>
                    <p class="mt-4 text-lg leading-8 text-gray-300">
                        <%= pageData.stats.description %>
                    </p>
                </div>
                <dl class="mt-16 grid grid-cols-1 gap-8 sm:mt-20 sm:grid-cols-2 lg:grid-cols-4">
                    <% pageData.stats.items.forEach(function(stat) { %>
                        <div class="flex flex-col gap-y-3 border-l border-white/10 pl-6">
                            <dt class="text-sm leading-6 text-gray-300"><%= stat.label %></dt>
                            <dd class="order-first text-3xl font-semibold tracking-tight text-white">
                                <%= stat.value %>
                            </dd>
                        </div>
                    <% }); %>
                </dl>
            </div>
        </div>
    </section>
<% } %>

<% if (pageData.cta) { %>
    <section class="relative isolate overflow-hidden bg-white py-16 sm:py-24 lg:py-32">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <div class="relative bg-gray-900 px-6 py-24 shadow-2xl sm:rounded-3xl sm:px-24 xl:py-32">
                <h2 class="mx-auto max-w-2xl text-center text-3xl font-bold tracking-tight text-white sm:text-4xl">
                    <%= pageData.cta.title %>
                </h2>
                <p class="mx-auto mt-6 max-w-xl text-center text-lg leading-8 text-gray-300">
                    <%= pageData.cta.description %>
                </p>
                <div class="mt-10 flex justify-center">
                    <a href="<%= pageData.cta.button.url %>"
                       class="rounded-md bg-white px-8 py-3.5 text-center text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white transition-all duration-300">
                        <%= pageData.cta.button.text %>
                    </a>
                </div>
            </div>
        </div>
    </section>
<% } %>